Λοιπόν εγώ το "έλυσα" ως εξής:
πήρα τα gif και αφού τα έκανα filp horizontaly στο photoshop τους άλλαξα ονόματα μεταξύ τους (έκανα το δεξί αριστερό και το αριστερό δεξί) όπως είχα πει παραπάνω.
στη συνέχεια πήγα στο /Themes/default/Skins/Skin-NavigationMenu.ascx όπου έκανα την αλλαγή που φαίνεται παρακάτω με bold.
<div id = "headertab">
<ul>
<asp:Repeater ID = "Menu" Runat = "server" >
<ItemTemplate>
<li id="closing" runat="server" class="closing"/><li runat = "Server" id = "listItem"><asp:Literal ID = "Sep" Runat = "server" /> <asp:HyperLink ID = "MenuItem" Runat ="server" /></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</div>
Δηλαδή πρόσθεσα ένα άδειο <LI> με class closing και id closing (δεν έχει καμία σημασία προφανώς αν είναι ή δεν είναι τα ίδια) που τρέχει στον server.
Τέλος πήγα στο γνωστό μας NavigationMenu.cs (το οποίου το skin είχα μόλις αλλάξει) και στην
private void Menu_ItemDataBound(object sender, RepeaterItemEventArgs e)
πρόσθεσα στο τέλος το bold από το κομμάτι που ακολουθεί:
if(string.Compare(link.Name,this.Selected,true) == 0)
{
HtmlGenericControl genericControl = e.Item.FindControl("listItem") as HtmlGenericControl;
if(genericControl != null)
genericControl.Attributes.Add("class", "currenttab");
genericControl = e.Item.FindControl("closing")
as HtmlGenericControl;
if(genericControl != null)
genericControl.Attributes.Add("class", "closingCurrent");
}
Δηλαδή πρόσθεσα δυο γραμμές που βρίσκουν το LI που προγουμένως έβαλα στοskin χρησιμοποιώντας του id του (closing) και του αλλάζω το class (CssClass) σε "colsingCurrent".
Τι έμεινε;
Πάμε και στο css και αφού βγάλουμε τα background rules από τους A selectors που είχα αναφέρει στο προηγούμενο post (να μην τα ξαναγράφω τώρα), προσθέτουμε, (τι άλλο;), δύ selectors για το closing και το closingCurrent ως εξής
#headertab li.closing
{
BACKGROUND: url(../images/righttab2.gif) no-repeat right top;
PADDING: 5px 0px 6px 9px
FLOAT: right;
}
#headertab li.closingCurrent
{
BACKGROUND-IMAGE: url(../images/righttab_on2.gif);
PADDING: 5px 0px 6px 9px;
FLOAT: right;
}
Α!.. επίσης στο #headertab UL A selector άλλαξα το PADDING-RIGHT από 15px σε 6px
Πιθανώς υπάρχει τρόπος να κάνεις με databinding expression το assignment του class property στο li tag μέσα στο skin (χωρίς να χρειάζεται compilation) αλλά βαριέμαι να το ψάξω τώρα (και νυστάζω επίσης).
Αυτό δουλεύει χωρίς flicker. Γιατί; Διότι ο IE (κακώς κατα πάσα πιθανότητα) κάνει redraw (ή invalidate) όλο το client area του <A> element μόλις περάσει το mouse από επάνω, στο πλαίσιο της υλοποίησης από την MSFT του hover pseudo-selector. Με άλλα λόγια ίσως να τό λεγε κανείς και bug (δεν ξέρω... ας μην λέω μεγάλη κουβέντα καλύτερα).
Μόλις βγάλεις το image από το background του A tag τότε το flicker σταματάει γιατί απλά το όποιο element την έχει τώρα πια δεν καταλαβαίνει από hover και δεν αντιδρά με repaint στο mouseover/mouseout.
Αυτά. Ελπίζω να βοήθησα. Εγώ πάντως βοηθήθηκα γιατί ήταν από τα πρώτα πράγματα που είχα παρατηρήσει στο CS από την πρώτη φορά που το είδα και με χάλαγε πολύ. Ούτως ή άλλως θα καθόμουνα να το λύσω.
rousso
υ/γ: δεν κι ό,τι καλύτερο η λύση που σας δίνω αλλά δουλεύει και γίνεται και γρήγορα. σίγουρα υπάρχει και καλύτερος τρόπος. Αυτό που έλεγα στο προηγούμενο post με τα tables είναι πιο καλό, αλλά αν δείτε τον κώδικα του CS θα πείτε κι εσείς άστο καλύτερα, δεν το ξαναγράφω όλο από την αρχη...
rousso